<html>
   <head>
      <meta charset="utf-8">
      <title><?= $page_title; ?></title>
      
      <link rel="stylesheet" href="<?= site_url('public/css/simple-canvas-01.css'); ?>" media="all" />
   </head>
   
   
   <body>
      
      <div id="screen"></div>
      <div id="matches"></div>
      
      
      
      
      <div id="controls">
         <button id="control_reset">Reset</button>
         <button id="control_gray">Gray</button>
         <button id="control_otsu">Otsu</button>
         <button id="control_histo">Histogram</button>
         
         <button id="control_grid1" class="control_grid_btn">0,0</button>
         <button id="control_grid2" class="control_grid_btn">1,0</button>
         <button id="control_grid3" class="control_grid_btn">2,0</button>
         
         <button id="control_grid4" class="control_grid_btn">0,1</button>
         <button id="control_grid5" class="control_grid_btn">1,1</button>
         <button id="control_grid6" class="control_grid_btn">2,1</button>
         
         <button id="control_grid7" class="control_grid_btn">0,2</button>
         <button id="control_grid8" class="control_grid_btn">1,2</button>
         <button id="control_grid9" class="control_grid_btn">2,2</button>
         
         <button id="control_matchit" class="btn_pos_right">Match It!</button>
         
         
         <div id="img_grid"></div>
      </div>
      
      <div class="hide_this_junk">
         <hr/>

         <p>Image loaded: <span id="info_imgloaded"></span></p>
         <p>Image width: <span id="info_imgwidth"></span></p>
         <p>Image height: <span id="info_imgheight"></span></p>
         <p>Log: <span id="info_log"></span></p>
      </div>
      
      <script src="<?= site_url('public/js/jquery.1.7.1.js'); ?>"></script>
      
      <?php foreach($scripts as $script): ?>
         <script src="<?= site_url('public/js/'. $script. '.js'); ?>"></script>
      <?php endforeach; ?>
         
      <script>
         
         $('#control_reset').live('click', GH.imgReset);
         $('#control_gray').live('click', GH.imgGray);
         $('#control_otsu').live('click', GH.imgReset);
         $('#control_histo').live('click', GH.imgHisto);
         
         $('#control_matchit').live('click', GH.matchit);
         $('body').live('click', function(){ $('#matches').hide(); });
            
         GH.init('screen');

         
         (function loadGrid()
         {
            var img;
            for(var i = 10; i < 60; i++)
            {
               img = '<img src="../public/img/pic' + i + '.jpg" id="grid_img_' + i + '" class="grid_img"/>';
               document.getElementById('img_grid').innerHTML += img;
            }
            
            $('.grid_img').live('click', function(){
               GH.publics.img.src = $(this).attr('src');
            });
         })();
      </script>
      
   </body>
</html>